@extends('layouts.header')
@section('title','检测设备列表')
@section('content')
    <div class="page-container">
        <input class="required" type="hidden" name="item_id" value="{{request()->item_id}}">
        <input class="required" type="hidden" name="sample_info_id" value="{{request()->sample_id}}">
        <div class="c-red">选中设备列表：</div>
        <div class="text-c">
            <table class="table table-border table-bordered table-hover table-bg" id="datatable-res">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>仪器设备名称</th>
                        <th>设备编号</th>
                        <th>有效截止日期</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
            <a class="btn btn-primary radius mt-10" id="submit">确定</a>
        </div>
        <div class="c-red">以下标签请点击展开选择：</div>
        <ul id="Huifold1" class="Huifold">
            <li class="item">
                <h4>设备套装组合 <span class="c-red">匹配机制：设备编号，若在选中设备列表中重复请自行删除</span><b>+</b></h4>
                <div class="info">
                    <table class="table table-border table-bordered table-hover table-bg" id="datatable-zu" style="white-space: nowrap;">
                        <thead>
                            <tr class="text-c">
                                <th></th>
                                <th>组合名称</th>
                                <th>设备名称</th>
                                <th>设备编号</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($groups as $name => $item)
                            <tr class="text-c">
                                <td><input type='checkbox' value="{{implode(',',array_column($item,'station_id'))}}"></td>
                                <td class="name">{{$name}}</td>
                                <td class="dev_name">{{implode(',',array_column($item,'station_name'))}}</td>
                                <td class="dev_num">{{implode(',',array_column($item,'dev_num'))}}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </li>
            <li class="item">
                <h4>设备列表<b>+</b></h4>
                <div class="info">
                    <table class="table table-border table-bordered table-hover table-bg" id="datatable" style="white-space: nowrap;">
                        <thead>
                            <tr class="text-c">
                                <th></th>
                                <th>序号</th>
                                <th>仪器设备名称</th>
                                <th>设备编号</th>
                                <th>出厂编号</th>
                                <th>规格/型号</th>
                                <th>量程范围</th>
                                <th>准确度/等级</th>
                                <th>溯源方式</th>
                                <th>溯源单位</th>
                                <th>溯源日期</th>
                                <th>有效截止日期至</th>
                                <th>校准周期</th>
                                <th>设备状态</th>
                                <th>负责人</th>
                                <th>生产厂家</th>
                                <th>购入日期</th>
                                <th>设备局域网IP</th>
                                <th>主机局域网IP</th>
                                <th>创建日期</th>
                                <th>备注</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($stations as $k => $item)
                            <tr class="text-c">
                                <td><input type='checkbox' value='{{$item->id}}'></td>
                                <td>{{$k+1}}</td>
                                <td class="name">{{$item->name}}</td>
                                <td class="dev_num">{{$item->dev_num}}</td>
                                <td>{{$item->fac_num}}</td>
                                <td>{{$item->spec}}</td>
                                <td>{{$item->ranges}}</td>
                                <td>{{$item->accuracy}}</td>
                                <td>{{$stat['trace_type'][$item->trace_type]}}</td>
                                <td>{{$item->trace_com}}</td>
                                <td>{{$item->trace_date}}</td>
                                <td class="trace_exp_date">{{$item->trace_exp_date}}</td>
                                <td>{{$stat['trace_cycle'][$item->trace_cycle]}}</td>
                                <td>{{$stat['status'][$item->status]}}</td>
                                <td>{{$item->user}}</td>
                                <td>{{$item->factory}}</td>
                                <td>{{$item->buy_date}}</td>
                                <td>{{$item->dev_lan_ip}}</td>
                                <td>{{$item->com_lan_ip}}</td>
                                <td>{{date('Y年m月d日',strtotime($item->ctime))}}</td>
                                <td>{{$item->remark}}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </li>
        </ul>
    </div>
    </div>
    <script type="text/javascript">
        var table,staIds="{{request('staIds','')}}".split(',');
        $(function () {
            $.fn.dataTable.ext.errMode = 'throw'; //datatable抛异常的方式，在console中输出，默认以alert的方式弹出
            $('#datatable').DataTable({
                paging: false,
            });
            $("#Huifold1").Huifold({
                titCell: '.item h4',
                mainCell: '.item .info',
                speed: 0,
                type: 2,
            });
            $(staIds).each(function(i){
                let staId = staIds[i];
                $('input:checkbox[value='+staId+']','#datatable').prop('checked',true).trigger('change');
            })
        });

        //监听设备列表选中，加到上面的展示表单中
        $('input:checkbox','#datatable').on('change',function () {
            let id = $(this).val(),
                trTGT = $(this).closest('tr'), //TGT is the short name of target
                station_count = parseInt($('#station_count').text());
            if($(this).prop('checked')){
                let str = '<tr id="tr-'+id+'">' +
                    '<td class="id">'+id+'</td>'+
                    '<td class="name">'+trTGT.find('td.name').text()+'</td>'+
                    '<td class="dev_num">'+trTGT.find('td.dev_num').text()+'</td>'+
                    '<td class="trace_exp_date">'+trTGT.find('td.trace_exp_date').text()+'</td>'+
                    '<td><i class="Hui-iconfont" onclick="removeTGT('+id+')">&#xe631;</i></td>'+
                '</tr>';
                $('tbody','#datatable-res').append(str);
                $('#station_count').text(station_count+1);
            }else{
                $('#tr-'+id,'#datatable-res tbody').remove();
                $('#station_count').text(station_count-1);
            }
        })

        function removeTGT(id){
            $('#tr-'+id,'#datatable-res tbody').remove(); //删除结果行
            $('input[value="'+id+'"]','#datatable tbody').prop('checked',false); //去掉选中
            let station_count = parseInt($('#station_count').text());
            $('#station_count').text(station_count-1);
        }

        //确定
        $('#submit').on('click', function () {
            let str = stati_ids = '';
            $('tbody','#datatable-res').find('tr').each(function () {
                stati_ids += ','+$(this).find('td.id').text();
                str += '<tr>' +
                    '<td>'+$(this).find('td.name').text()+'</td>'+
                    '<td>'+$(this).find('td.dev_num').text()+'</td>'+
                    '<td>'+$(this).find('td.trace_exp_date').text()+'</td>'+
                    '</tr>';
            })
            // console.log(str);
            let itmid = $('input[name=item_id]').val(),
                tbodyId = "#tbody_"+itmid;
            parent.$(tbodyId).html(str);
            parent.$('#station_ids_'+itmid).val(stati_ids.substring(1));
            parent.$(tbodyId).closest('form').find('.def-tip').text('以下为修改后的默认设备列表，请及时保存！');
            layer_close();
        })

        $('input:checkbox','#datatable-zu').on('change',function () {
            var checked=$(this).prop('checked'),
                dev_nums = $(this).closest('tr').find('td.dev_num').text().split(',');
            for(let i in dev_nums){
                var dev_num = dev_nums[i];
                $('td.dev_num','#datatable').each(function () {
                    if($(this).text() == dev_nums[i]){
                        $(this).closest('tr').find('input:checkbox').prop('checked',checked).trigger('change');
                    }
                })
            }
        })

    </script>

@endsection